<script setup>
	import { ref } from 'vue'
	const { statusBarHeight } = uni.getSystemInfoSync()
	const props = defineProps({
		countdown: Number,
		status: Number,
		statusValue: String,
		orderId: String,
	})
	
	const emit = defineEmits(['tab-change'])
	
	console.log('props', props)
	const payment = ref()
	function close() {
		payment.value.hidePayment()
	}
	async function confirm(index) {
		if (index === 0) return uni.utils.toast('暂不支持微信支付!')
		const { code, data, message } = await paymentApi({
			paymentMethod: index,
			orderId: props.orderId,
			payCallback: `http://consult-patients.itheima.net/#/subpkg_consult/room/index`,
		})

		// 接口是否调用成功
		if (code !== 10000) return uni.utils.toast(message)

		// #ifdef H5
		window.location.href = data.payUrl
		// #endif

		// #ifdef MP-WEIXIN
		wx.requestPayment({
			//4个参数
		})
		// #endif
		uni.navigateTo({
			url: `/subpkg_consult/room/index?orderId=${orderId.value}`,
		})
	}
	
	// 触发 tab-change 事件
	function handleTabChange() {
		emit('tab-change')
	}
</script>
<template>
	<view class="room-status" v-if="props.status" :style="{top:statusBarHeight+44+'px'}" @click="handleTabChange">
		<!-- 等待医生 2 -->
		<view v-if="props.status === 2" class="status waiting"
			>{{ props.statusValue }}
		</view>
		<!-- 咨询中 3 -->
		<view v-if="props.status === 3" class="status countdown">
			<text class="text">{{ props.statusValue }}</text>
			<view class="time">
				<text>剩余时间： </text>
				<uni-countdown
					color="#3c3e42"
					:show-day="false"
					:font-size="14"
					:second="props.countdown"
					v-if="true"
				></uni-countdown>
			</view>
		</view>
		<!-- 完成 4 -->
		<view v-if="props.status === 4" class="status">
			<uni-icons size="20" color="#121826" type="checkbox-filled" />
			{{ props.statusValue }}
		</view>
	</view>
	<custom-payment
		ref="payment"
		@close="close"
		@confirm="confirm"
		:orderId="props.orderId"
		:amount="props.actualPayment"
	>
	</custom-payment>
</template>

<style lang="scss">
	.room-status {
		position: sticky;
		top: 0;
		background-color: #fff;
		z-index: 100;
		width: 100%;
		.status {
			box-sizing: border-box;
			padding: 20rpx 40rpx;
			display: flex;
			align-items: center;
			height: 100%;
				font-size: 32rpx;
			.text {
				color: #7bd3b8;
			}
			.time {
				display: flex;
				align-items: center;
			}
		}
		.countdown {
			justify-content: space-between;
		}
		.waiting {
			color: #16c2a3;
			background-color: #eaf8f6;
		}
	}
</style>
